<template>
  <div class="item_box">
    <div class="pull-right">
      <el-button plain type="primary" @click="handle">导出</el-button>
    </div>
    <p class="title_1 mb20">商机跟进活动记录</p>
    <el-table
      v-loading="loading"
      :data="list_0"
    >
      <el-table-column label="序号" align="center" type="index" width="60" :show-overflow-tooltip="true"/>
      <el-table-column label="活动类型" align="center" prop="type" :show-overflow-tooltip="true"/>
      <el-table-column label="活动时间" align="center" prop="time" :show-overflow-tooltip="true"/>
      <el-table-column label="活动描述" align="center" prop="desc" :show-overflow-tooltip="true"/>
      <el-table-column label="参与人" align="center" prop="person" :show-overflow-tooltip="true"/>
      <el-table-column label="参与机构" align="center" prop="branchName" :show-overflow-tooltip="true"/>
      <el-table-column label="客户代表" align="center" prop="clientRepre" :show-overflow-tooltip="true"/>
      <el-table-column label="费用(元)" align="center" prop="expense" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handle(scope.row)">查看附件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <div class="item_box">
    <div class="pull-right">
      <el-button plain type="primary" @click="addCustomerFormVisible = true">新增</el-button>
      <el-button plain type="primary" @click="handle">导出</el-button>
    </div>
    <p class="title_1 mb20">客户服务历史</p>
    <el-table
      v-loading="loading"
      :data="list_1"
    >
      <el-table-column label="服务计划日期" align="center" prop="plannDate" :show-overflow-tooltip="true"/>
      <el-table-column label="服务实施日期" align="center" prop="implementationDate" :show-overflow-tooltip="true"/>
      <el-table-column label="服务号" align="center" prop="serviceNo" :show-overflow-tooltip="true"/>
      <el-table-column label="服务类型" align="center" prop="serviceType" :show-overflow-tooltip="true"/>
      <el-table-column label="服务项" align="center" prop="serviceItem" :show-overflow-tooltip="true"/>
      <el-table-column label="服务内容" align="center" prop="content" :show-overflow-tooltip="true"/>
      <el-table-column label="服务地点" align="center" prop="address" :show-overflow-tooltip="true"/>
      <el-table-column label="责任分公司" align="center" prop="branchName" :show-overflow-tooltip="true"/>
      <el-table-column label="责任部门" align="center" prop="section" :show-overflow-tooltip="true"/>
      <el-table-column label="责任人" align="center" prop="PersonCharge" :show-overflow-tooltip="true"/>
      <el-table-column label="上级主管人" align="center" prop="topPerson" :show-overflow-tooltip="true"/>
      <el-table-column label="服务状态" align="center" prop="status" :show-overflow-tooltip="true"/>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog v-model="addCustomerFormVisible" title="客户服务历史" width="80%" append-to-body>
        <el-form class="custom-form" :inline="true" :model="addCustomerForm" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="服务计划日期" prop="plannDate">
                <el-date-picker v-model="addCustomerForm.plannDate" type="date" style="width: 200px;" placeholder="请选择"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务实施日期" prop="implementationDate">
                <el-date-picker v-model="addCustomerForm.implementationDate" type="date" style="width: 200px;" placeholder="请选择" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务号" prop="serviceNo">
                <el-input v-model="addCustomerForm.serviceNo" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务类型" prop="serviceType">
                <el-select
                  v-model="addCustomerForm.serviceType"
                  clearable
                  placeholder="请选择"
                  style="width: 200px"
                >
                  <el-option
                    v-for="dict in serviceTypeOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务项" prop="serviceItem">
                <el-input v-model="addCustomerForm.serviceItem" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务内容" prop="content">
                <el-input v-model="addCustomerForm.content" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务地点" prop="address">
                <el-input v-model="addCustomerForm.address" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任分公司" prop="branchName">
                <el-select v-model="addCustomerForm.branchName" clearable style="width: 200px" placeholder="请选择">
                  <el-option
                    v-for="dict in branchOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任部门" prop="section">
                <el-select v-model="addCustomerForm.section" clearable style="width: 200px" placeholder="请选择" >
                  <el-option
                    v-for="dict in sectionOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="责任人" prop="PersonCharge">
                <el-input v-model="addCustomerForm.PersonCharge" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上级主管人" prop="topPerson">
                <el-input v-model="addCustomerForm.topPerson" style="width: 200px;" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务状态" prop="status">
                <el-select v-model="addCustomerForm.status" clearable style="width: 200px" placeholder="请选择" >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="备注" prop="remark" style="width: 100%;">
                <el-input v-model="addCustomerForm.remark" type="textarea" placeholder="请输入"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-button plain @click="addCustomerFormVisible = false">取消</el-button>
            <el-button plain type="primary" @click="addCustomerFormVisible = false">确定</el-button>
          </el-row>
        </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="customerRelationship">
import { nextTick, reactive, ref, toRefs } from "vue"

  const props = defineProps({
		activeName: {
			type: String,
		},
	})

  const list_0 = ref([])
  const list_1 = ref([])
  const loading = ref(false)
  const total = ref(0)

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
  })

  const { queryParams } = toRefs(data)
  const handleClick = (tab) => {
    getList()
  }
  const getList = () => {
    loading.value = true
    setTimeout(() => {
      list_0.value = [
        {
          type: '客户拜访(分)',
          time: '2024-01-10',
          desc: '活动描述',
          person: '张三',
          branchName: '上海分公司',
          clientRepre: '张三',
          expense: '1,100',
        },
        {
          type: '客户拜访(总)',
          time: '2024-01-10',
          desc: '活动描述',
          person: '张三',
          branchName: '总公司',
          clientRepre: '张三',
          expense: '1,100',
        },
        {
          type: '其他',
          time: '2024-01-10',
          desc: '活动描述',
          person: '张三',
          branchName: '上海分公司',
          clientRepre: '张三',
          expense: '1,100',
        },
      ]
      list_1.value = [
        {
          plannDate: '2024-01-10',
          implementationDate: '2024-02-01',
          serviceNo: '202401101212',
          serviceType: '培训',
          serviceItem: '保险培训',
          content: '服务内容描述',
          address: '上海市徐汇区',
          branchName: '上海市分公司',
          section: '团险业务部',
          PersonCharge: '张三',
          topPerson: '理事',
          status: '已反馈',
        },
        {
          plannDate: '2024-01-10',
          implementationDate: '2024-02-01',
          serviceNo: '202401101212',
          serviceType: '培训',
          serviceItem: '保险培训',
          content: '服务内容描述',
          address: '上海市徐汇区',
          branchName: '上海市分公司',
          section: '团险业务部',
          PersonCharge: '张三',
          topPerson: '理事',
          status: '已反馈',
        },
        {
          plannDate: '2024-01-10',
          implementationDate: '2024-02-01',
          serviceNo: '202401101212',
          serviceType: '培训',
          serviceItem: '保险培训',
          content: '服务内容描述',
          address: '上海市徐汇区',
          branchName: '上海市分公司',
          section: '团险业务部',
          PersonCharge: '张三',
          topPerson: '理事',
          status: '已反馈',
        },
      ]
      total.value = list_0.value.length
      loading.value = false
    }, 200);
  }
  const handle = (val) => {

  }
  const addCustomerFormVisible = ref(false)
  const addCustomerForm = ref({})
  const serviceTypeOptions = ref([{ label: "类系1", value: "" }]);
  const branchOptions = ref([{ label: "分公司1", value: "" }]);
  const sectionOptions = ref([{ label: "部门1", value: "" }]);
  const statusOptions = ref([{ label: "状态1", value: "" }]);
  
  getList()

  watch(() => props.activeName, (val) => {
		if (val == '1')
		getList()
	})

</script>
<style lang="scss" scoped>
</style>
